<template>
  <draggable
    class="draggable-list2"
    v-model="list2"
    group="plugin"
    animation="300"
    @input="handleInput"
  >
    <transition-group :style="{ minHeight: '120px', display: 'block' }">
      <div class="list-group-item" v-for="element in list2" :key="element.name">
        {{ element.name }}
      </div>
    </transition-group>
  </draggable>
</template>
<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      list2: [],
    };
  },
  methods: {
    handleInput(val) {
      console.log("22handleInput==", val);
    },
  },
};
</script>
<style lang="less" scoped>
.draggable-list2 {
  width: 100%;
  height: 500px;
  .list-group-item {
    background: #fff;
    padding: 10px;
    border: 1px solid #efefef;
    border-bottom: none;
    text-align: center;
    cursor: pointer;
  }
  .list-group-item:last-child {
    border-bottom: 1px solid #efefef;
  }
}
</style>
